<template>
  <div class="home-wrap">
    <template v-if="!loginFlag">
      <div class="header-wrap">
        <img src="./monit-img/logo.png" alt="" class="logo" />
        <div class="name">{{ title }}</div>
        <NstdMonitMenu
          :data="nstdMonitMenu1Data"
          font-size="20px"
          color="#fff"
          mode="horizontal"
          label="title"
          class="nstd-monit-menu_1"
          @menu-click="handleMenuClick"
        />
        <i class="search-icon"></i>
        <i class="yf-icon"></i>
        <i class="ld-icon"></i>
        <i class="line"></i>
        <i class="rt-icon"></i>
        <p class="userName">admin</p>
        <i class="line"></i>
        <i class="kg-icon" @click="onLogoutClick"></i>
      </div>
      <div class="breadcrumb-wrap" v-if="pathList.length">
        <i></i>
        <span class="text">当前位置：</span>
        <NstdBizBreadcrumb separator="/" font-size="16px" :options="pathList" class="nstd-biz-breadcrumb_1" />
      </div>
      <router-view />
    </template>
    <router-view v-else />
  </div>
</template>

<script>
  import { useAuthStore } from '@/stores/index.js';
  import { getSignV2Logout } from '@/api/auth/signV2.js';
  import { flatMenuData } from '@/utils/menu.js';

  export default {
    name: 'monitorIndex',
    data() {
      return {
        pathList: [],
        nstdMonitMenu1Data: [],
        parentMenu: []
      };
    },
    computed: {
      loginFlag() {
        return this.$route.fullPath === '/home';
      },
      title() {
        return window.NC_PROJECT_CONFIG.title;
      },
      menuList() {
        return useAuthStore().menuList;
      }
    },
    watch: {
      menuList: {
        handler(val) {
          this.getMenuList();
        },
        deep: true
      }
    },
    mounted() {
      this.getMenuList();
      if (sessionStorage.getItem('pathList')) this.pathList = JSON.parse(sessionStorage.getItem('pathList'));
    },
    methods: {
      handleMenuClick(item) {
        this.parentMenu = [];
        if (item.children && item.children.length) return false;
        this.$router.push(item.path);
        this.getAllParentMenu(item);
        const homeItem = {
          path: '/monitorHome',
          display: 1,
          title: '首页',
          to: '/monitorHome'
        };
        this.pathList = [homeItem, ...this.parentMenu, item].map((i) => {
          return {
            ...i,
            label: i.title
          };
        });
        sessionStorage.setItem('pathList', JSON.stringify(this.pathList));
      },
      getAllParentMenu(item) {
        const menuList = flatMenuData(this.nstdMonitMenu1Data).filter((i) => i.id === item.pid);
        this.parentMenu = [...this.parentMenu, ...menuList];
        if (menuList.length) this.getAllParentMenu(menuList[0], this.parentMenu);
      },
      async onLogoutClick() {
        this.pathList = [];
        await getSignV2Logout();
        sessionStorage.clear();
        useAuthStore().clearUserInfo();
        this.$router.push({
          path: '/login',
          replace: true
        });
      },
      getMenuList() {
        const transformRouters = (routers) => {
          return routers
            .filter((i) => i.meta.nav !== false && i.meta.display)
            .map((routerItem) => {
              const { meta, path, children } = routerItem;
              if (children && children.length) {
                return {
                  ...meta,
                  path,
                  children: transformRouters(children)
                };
              } else {
                return {
                  ...meta,
                  path
                };
              }
            });
        };
        const { menuList: routes } = useAuthStore();
        this.nstdMonitMenu1Data = reactive(transformRouters(routes));
        this.nstdMonitMenu1Data = this.nstdMonitMenu1Data.splice(3, this.nstdMonitMenu1Data.length);
        console.log(this.nstdMonitMenu1Data, 'menuList');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .breadcrumb-wrap {
    padding-left: 24px;
    height: 22px;
    line-height: 22px;
    display: flex;
    align-items: center;
    font-weight: 650;
    font-size: 14px;
    :deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
      color: #99b9fe;
      cursor: pointer;
    }
    .text {
      color: #99b9fe;
    }
    i {
      width: 12px;
      height: 14px;
      background: url('./monit-img/dian.png') no-repeat center center/100% 100%;
      margin-right: 5px;
    }
    :deep(.el-breadcrumb__item) {
      font-size: 14px;
    }
    :deep(.el-breadcrumb__inner),
    :deep(.el-breadcrumb__inner:hover) {
      font-weight: 650;
    }
  }
  .home-wrap {
    height: 100%;
    background: url('./monit-img/bg.png') no-repeat center center/100% 100%;
    .header-wrap {
      height: 68px;
      background: url('./monit-img/header.png') no-repeat center center/100% 100%;
      display: flex;
      align-items: center;
      padding: 0 24px;
      .kg-icon {
        width: 20px;
        height: 22px;
        background: url('./img/kg.png') no-repeat center center/100% 100%;
        cursor: pointer;
      }
      .userName {
        font-weight: 650;
        font-size: 14px;
        color: #ffffff;
        margin-right: 22px;
      }
      .rt-icon {
        width: 22px;
        height: 22px;
        background: url('./img/ren.png') no-repeat center center/100% 100%;
        margin-right: 8px;
      }
      .line {
        width: 5px;
        height: 25px;
        background: url('./img/line.svg') no-repeat center center/100% 100%;
        margin-right: 16px;
      }
      .search-icon {
        width: 20px;
        height: 20px;
        background: url('./monit-img/search.png') no-repeat center center/100% 100%;
        margin-right: 16px;
      }
      .yf-icon {
        width: 25px;
        height: 22px;
        background: url('./monit-img/yf.png') no-repeat center center/100% 100%;
        margin-right: 16px;
      }
      .ld-icon {
        width: 20px;
        height: 22px;
        background: url('./monit-img/ld.png') no-repeat center center/100% 100%;
        margin-right: 16px;
      }
      .nstd-monit-menu_1 {
        width: calc(100% - 652px);
        margin-right: 70px;
      }
      .name {
        width: 141px;
        font-weight: 650;
        font-size: 24px;
        color: #ffffff;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .logo {
        width: 148px;
        height: 48px;
        margin-right: 16px;
      }
    }
  }
</style>
